<template>
  <view class="infos">
    <view class="mapBox">
      <map v-if="detailInfo.id" style="width: 100%;height: 900rpx;" :latitude="detailInfo.location[0]"
        :longitude="detailInfo.location[1]" :show-scale="true" :markers="detailInfo.markers"></map>
    </view>
    <view class="tit">
      当前游玩项目：{{detailInfo.title}}
    </view>
    <view class="stars">
      <text>项目推荐</text>
      <up-rate :count="5" v-model="detailInfo.count"></up-rate>
    </view>
    <view class="scrollView">
      <up-scroll-list :indicator="true" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
        <view class="items" v-for="(item,index) in detailInfo.other" :key="item.id">
          <image class="img" :src="item.url" mode="aspectFill"></image>
          <view class="title">
            {{item.name}}
          </view>
        </view>
      </up-scroll-list>
    </view>
  </view>
</template>

<script setup>
  import {
    onLoad
  } from '@dcloudio/uni-app';
  import {
    projectInfoAPI
  } from '@/api/api.js'
  import {
    ref
  } from 'vue';
  const detailInfo = ref({})

  onLoad(async (options) => {

    const res = await projectInfoAPI({
      id: options.id
    })
    console.log(res);
    detailInfo.value = res.data.data
  })
</script>

<style lang="scss">
  .infos {
    padding: 20rpx;
    box-sizing: border-box;

    .tit {
      font-size: 34rpx;
      font-weight: 600;
      color: #333;
    }

    .stars {
      font-size: 28rpx;
      margin: 20rpx 0 40rpx;
      display: flex;
    }

    .items {
      margin-right: 20rpx;
      text-align: center;
    }

    .img {
      width: 320rpx;
      height: 200rpx;
      border-radius: 14rpx;
    }

    .title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
    }
  }
</style>